<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">
<head>
    <title th:text="${flower.id == null ? '添加新花卉' : '修改花卉信息'}">添加/修改花卉</title>
    <style>
        .form-container {
            background-color: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(255, 105, 180, 0.1);
            margin-bottom: 30px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .form-title {
            font-size: 2rem;
            font-weight: 700;
            color: #ff1493;
            margin-bottom: 1.5rem;
            text-align: center;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        .card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.15);
        }
        .card-header {
            background: linear-gradient(135deg, #ffcce0, #fff0f5);
            border-bottom: none;
            padding: 20px;
        }
        .card-title {
            color: #ff1493;
            font-weight: 600;
            margin: 0;
        }
        .card-body {
            padding: 30px;
        }
        .form-label {
            color: #555;
            font-weight: 600;
        }
        .input-group-text {
            border-color: #ffcce0;
            background-color: white;
        }
        .form-control, .form-select {
            border: 2px solid #ffcce0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            transition: all 0.3s ease;
        }
        .form-control:focus, .form-select:focus {
            border-color: #ff69b4;
            box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25);
        }
        .form-button {
            border-radius: 30px;
            padding: 10px 30px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .btn-primary.form-button {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            border: none;
            color: white;
            box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
        }
        .btn-primary.form-button:hover {
            background: linear-gradient(135deg, #ff1493, #ff69b4);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 105, 180, 0.4);
        }
        .btn-secondary.form-button {
            background: linear-gradient(135deg, #e6e6e6, #cccccc);
            border: none;
            color: #555;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .btn-secondary.form-button:hover {
            background: linear-gradient(135deg, #cccccc, #e6e6e6);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .form-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .form-icon {
            font-size: 1.2rem;
            color: #ff69b4;
        }
        .required-field::after {
            content: "*";
            color: #ff1493;
            margin-left: 4px;
        }
        .form-floating-flower {
            position: absolute;
            opacity: 0.1;
            z-index: -1;
            animation: formFloat 20s infinite linear;
        }
        @keyframes formFloat {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            100% {
                transform: translate(100px, -100px) rotate(360deg);
            }
        }
        .form-field {
            margin-bottom: 1.5rem;
            position: relative;
            transition: all 0.3s ease;
        }
        .form-field:hover {
            transform: translateX(5px);
        }
        .form-field-icon {
            position: absolute;
            left: -30px;
            top: 10px;
            color: #ff69b4;
            font-size: 1.2rem;
            opacity: 0;
            transition: all 0.3s ease;
        }
        .form-field:hover .form-field-icon {
            opacity: 1;
            left: -20px;
        }
        .invalid-feedback {
            font-size: 0.85rem;
            margin-top: 0.5rem;
            color: #ff1493;
        }
    </style>
</head>
<body>
    <h1 layout:fragment="header" th:text="${flower.id == null ? '添加新花卉' : '修改花卉信息'}">添加/修改花卉</h1>

    <div layout:fragment="content">
        <div class="form-container">
            <h2 class="form-title">
                <i class="bi bi-flower3 me-2"></i>
                <span th:text="${flower.id == null ? '添加新花卉' : '修改花卉信息'}">花卉信息</span>
            </h2>
            
            <div class="row">
                <div class="col-md-10 offset-md-1 position-relative">
                    <!-- Floating flowers for decoration -->
                    <i class="bi bi-flower1 form-floating-flower" style="top: 50px; left: -50px; font-size: 40px;"></i>
                    <i class="bi bi-flower2 form-floating-flower" style="top: 200px; right: -30px; font-size: 30px;"></i>
                    <i class="bi bi-flower3 form-floating-flower" style="bottom: 100px; left: -40px; font-size: 35px;"></i>
                    
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title text-center">
                                <i class="bi bi-flower3 me-2" style="color: #ff69b4;"></i>
                                <span th:text="${flower.id == null ? '填写新花卉信息' : '更新花卉信息'}">花卉信息</span>
                            </h5>
                        </div>
                        <div class="card-body">
                            <form th:action="@{/flowers/save}" th:object="${flower}" method="post" class="needs-validation" novalidate>
                                <input type="hidden" th:field="*{id}" />

                                <div class="form-field mb-4 row">
                                    <i class="bi bi-arrow-right-circle form-field-icon"></i>
                                    <label for="name" class="col-sm-3 col-form-label required-field">花卉名称</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-flower1 form-icon"></i>
                                            </span>
                                            <input type="text" class="form-control" id="name" th:field="*{name}" required
                                                   placeholder="请输入花卉名称">
                                        </div>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">
                                            请输入花卉名称
                                        </div>
                                    </div>
                                </div>

                                <div class="form-field mb-4 row">
                                    <i class="bi bi-arrow-right-circle form-field-icon"></i>
                                    <label for="category" class="col-sm-3 col-form-label required-field">类别</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-tags form-icon"></i>
                                            </span>
                                            <select class="form-select" id="category" th:field="*{category}" required>
                                                <option value="">-- 请选择类别 --</option>
                                                <option value="观赏花">观赏花</option>
                                                <option value="切花">切花</option>
                                                <option value="盆栽花">盆栽花</option>
                                                <option value="干花">干花</option>
                                                <option value="装饰花">装饰花</option>
                                                <option value="其他">其他</option>
                                            </select>
                                        </div>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('category')}" th:errors="*{category}">
                                            请选择类别
                                        </div>
                                    </div>
                                </div>

                                <div class="form-field mb-4 row">
                                    <i class="bi bi-arrow-right-circle form-field-icon"></i>
                                    <label for="price" class="col-sm-3 col-form-label required-field">价格 (¥)</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-currency-yen form-icon"></i>
                                            </span>
                                            <input type="number" class="form-control" id="price" th:field="*{price}" 
                                                   step="0.01" min="0" required placeholder="请输入价格">
                                        </div>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('price')}" th:errors="*{price}">
                                            请输入有效价格
                                        </div>
                                    </div>
                                </div>

                                <div class="form-field mb-4 row">
                                    <i class="bi bi-arrow-right-circle form-field-icon"></i>
                                    <label for="stockQuantity" class="col-sm-3 col-form-label required-field">库存数量</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-box-seam form-icon"></i>
                                            </span>
                                            <input type="number" class="form-control" id="stockQuantity" th:field="*{stockQuantity}" 
                                                   min="0" required placeholder="请输入库存数量">
                                        </div>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('stockQuantity')}" th:errors="*{stockQuantity}">
                                            请输入有效的库存数量
                                        </div>
                                    </div>
                                </div>

                                <div class="form-field mb-4 row">
                                    <i class="bi bi-arrow-right-circle form-field-icon"></i>
                                    <label for="storageLocation" class="col-sm-3 col-form-label required-field">存放位置</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-geo-alt form-icon"></i>
                                            </span>
                                            <input type="text" class="form-control" id="storageLocation" th:field="*{storageLocation}" 
                                                   required placeholder="请输入存放位置">
                                        </div>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('storageLocation')}" th:errors="*{storageLocation}">
                                            请输入存放位置
                                        </div>
                                    </div>
                                </div>

                                <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-5">
                                    <a th:href="@{/flowers}" class="btn btn-secondary me-md-2 px-4 form-button">
                                        <i class="bi bi-x-circle me-1"></i>取消
                                    </a>
                                    <button type="submit" class="btn btn-primary px-4 form-button">
                                        <i class="bi bi-check-circle me-1"></i>保存
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Form validation
                const form = document.querySelector('.needs-validation');
                
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    
                    form.classList.add('was-validated');
                });
                
                // Add animation to form elements
                const formElements = document.querySelectorAll('.form-field');
                formElements.forEach((element, index) => {
                    element.style.animation = `fadeIn 0.3s ease-in-out ${index * 0.1}s forwards`;
                    element.style.opacity = '0';
                });
                
                // Add CSS for animation
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes fadeIn {
                        from { opacity: 0; transform: translateY(10px); }
                        to { opacity: 1; transform: translateY(0); }
                    }
                    .form-control:focus, .form-select:focus {
                        border-color: #ff69b4 !important;
                        box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25) !important;
                    }
                    .was-validated .form-control:valid {
                        border-color: #ff69b4 !important;
                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23ff69b4' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
                    }
                `;
                document.head.appendChild(style);
                
                // Animate floating flowers
                const floatingFlowers = document.querySelectorAll('.form-floating-flower');
                floatingFlowers.forEach((flower, index) => {
                    flower.style.animationDelay = `${index * 2}s`;
                });
                
                // Add input focus effects
                const formControls = document.querySelectorAll('.form-control, .form-select');
                formControls.forEach(control => {
                    control.addEventListener('focus', function() {
                        this.closest('.form-field').style.transform = 'translateX(10px)';
                    });
                    control.addEventListener('blur', function() {
                        this.closest('.form-field').style.transform = '';
                    });
                });
                
                // Add submit button pulse effect
                const submitButton = document.querySelector('button[type="submit"]');
                submitButton.classList.add('btn-pulse');
            });
        </script>
    </th:block>
</body>
</html> 